import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
}

@Form.create()
class LegalModal extends PureComponent {
  handleOk = () => {
    const { item = {}, onOk, form } = this.props
    const { validateFields, getFieldsValue } = form

    validateFields(errors => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
      }
      onOk(data)
    })
  }

  render() {
    const { item = {}, onOk, form, roleList, ...modalProps } = this.props
    const { getFieldDecorator } = form

    return (
      <Modal {...modalProps} onOk={this.handleOk}>
        <Form layout="horizontal">
          <FormItem label={'用户名'} {...formItemLayout}>
            {getFieldDecorator('username', { initialValue: item.username, rules: [{ required: true, message: '请输入用户名' }] })(<Input placeholder={'请输入用户名'} />)}
          </FormItem>
          <FormItem label={'昵称'} {...formItemLayout}>
            {getFieldDecorator('nickname', { initialValue: item.nickname, rules: [{ required: false, message: '请输入昵称' }] })(<Input placeholder={'请输入昵称'} />)}
          </FormItem>
          <FormItem label={'密码'} {...formItemLayout}>
            {getFieldDecorator('password', {
              initialValue: item.password, rules: [{ required: false, message: '请输入密码' }]
            })(<Input type="password" placeholder='初始密码为：123456' />)}
          </FormItem>
          <FormItem label={'所属角色'} {...formItemLayout}>
            {getFieldDecorator('role_id', {
              initialValue: item.role_id, rules: [{ required: true, message: '请选择所属角色' }]
            })(<Select
              style={{ width: '100%' }}
              placeholder={'选择所属角色'}
            >
              {Array.isArray(roleList) && roleList.map((d, i) => <Select.Option key={i} value={d.id} label={d.role_name}>{d.role_name}</Select.Option>)}
            </Select>)}
          </FormItem>
          <FormItem label={'邮箱'} {...formItemLayout}>
            {getFieldDecorator('email', {
              initialValue: item.email, rules: [{ type: 'email', message: '请输入正确的邮箱地址!' }, { required: true, message: '请输入邮箱地址!' }]
            })(<Input placeholder='请输入邮箱地址' />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

LegalModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default LegalModal
